<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>在线接口文档</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">

    <style>
        .btn-li {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div class="layui-header header-demo">
        <div class="layui-logo layui-hide-xs layui-bg-black"><a style="color: #fff;" href="/">在线接口文档</a></div>
        <ul class="layui-nav" style="float: right;">
            <li id="exportEol" class="layui-nav-item btn-li" style="color: #fff;">导出到eol</li>
            <li id="exportRap" class="layui-nav-item btn-li" style="color: #fff;">导出到rap</li>
            <li id="permanentParamVal" class="layui-nav-item btn-li" style="color: #fff;">持久化全局参数</li>
            <li id="permanentResultCache" class="layui-nav-item btn-li" style="color: #fff;">持久化全局结果描述</li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menu">

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <button class="layui-btn layui-bg-blue" id="syntaxFileId">重新解析此文件</button>
            <div id="main"></div>
        </div>
    </div>


</div>
<script src="./static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layui/'
    }).use(['jquery' ], function(){
        const $ = layui.jquery;
        // 显示左侧文件列表
        var valDefault;
        $.getJSON('/api/index', function(d) {
            if(d.code != 200) {
                layer.msg('获取接口失败');
                return;
            }
            const data = d.data;
            data.forEach(function(val) {
                // 显示默认第一个文件的接口
                if(!valDefault) {
                    valDefault = val
                    showMain(valDefault.file_name)
                }
                const html = '<li class="layui-nav-item"><a onclick="showMain(\''+ val.file_name +'\')" href="javascript:void(0);">'+ val.file_name + ' ' + val.desc +'</a></li>';
                $('#menu').append(html);
            })
        })

        // 显示右侧接口列表
        showMain = function(fileName) {
            valDefault.file_name = fileName
            $('#main').html('');

            $.getJSON('/api/apiList?api=' + fileName, function(d) {
                if(d.code != 200) {
                    layer.msg("接口详情获取失败")
                    return
                }
                const data = d.data;
                if(!data) {
                    return
                }
                data.forEach(function(data) {
                    let htmlParam = '<tbody>';
                    console.log(data)
                    if(!!data.param) {
                        data.param.forEach(function(data) {
                            let required = '<b style="color: red">是</b>'
                            if(!data.is_required) {
                                required = '否'
                            }
                            htmlParam += '                        <tr>\n' +
                                '                            <td>'+ data.key +'</td>\n' +
                                '                            <td>'+ required +'</td>\n' +
                                '                            <td>'+ data.default +'</td>\n' +
                                '                        </tr>\n'
                        })
                    }
                    htmlParam += '</tbody>'
                    const html = '<div class="layui-card">\n' +
                        '                <div class="layui-card-header">'+ data.desc +'</div>\n' +
                        '                <div class="layui-card-header"><button onclick="goTest(\''+ data.url +'\')" type="button" class="layui-btn">在线请求</button></div>\n' +
                        '                <div class="layui-card-body">\n' +
                        '                    <table lay-even lay-size="lg" class="layui-table">\n' +
                        '                        <thead><tr>\n' +
                        '                            <th>接口地址</th>\n' +
                        '                            <th>提交方式</th>\n' +
                        '                            <th>时间</th>\n' +
                        '                            <th>作者</th>\n' +
                        '                        </tr></thead>\n' +
                        '                        <tbody><tr>\n' +
                        '                            <td>'+ data.url +'</td>\n' +
                        '                            <td>'+ data.method +'</td>\n' +
                        '                            <td>'+ data.time +'</td>\n' +
                        '                            <td>'+ data.author +'</td>\n' +
                        '                        </tr></tbody>\n' +
                        '                    </table>\n' +
                        '\n' +
                        '                    <table lay-even lay-size="lg" class="layui-table">\n' +
                        '                        <thead><tr>\n' +
                        '                            <th>参数</th>\n' +
                        '                            <th>是否必填</th>\n' +
                        '                            <th>默认值</th>\n' +
                        '                        </tr></thead>\n' +
                         htmlParam +
                        '                    </table>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '            <br />'
                    $('#main').append(html)
                });
            })

        }

        // 跳转到测试页面
        goTest = function(url) {
            window.location = '/request?url=' + url
        }

        // 重新解析此文件
        $('#syntaxFileId').on('click', function() {
            const fileName = valDefault.file_name
            $.getJSON('/api/syntaxFile?file=' + fileName, function(d) {
                if(d.code != 200) {
                    layer.msg("解析失败")
                    return
                }
                location.reload()
            });
        })

        // 导出到 rap
        $('#exportRap').on('click', function() {
            window.open('/export/rap')
        })

        // 导出到 eol
        $('#exportEol').on('click', function() {
            window.open('/export/eol')
        })

        // 持久化全局参数
        $('#permanentParamVal').on('click', function() {
            $.getJSON('/api/permanentParamVal', function(d) {
                if(d.code !== 200) {
                    layer.msg('错误')
                    return
                }
                layer.msg('操作成功')
                return
            })
        })

        // 持久化全局结果描述
        $('#permanentResultCache').on('click', function() {
            $.getJSON('/api/permanentResultCache', function(d) {
                if(d.code !== 200) {
                    layer.msg('错误')
                    return
                }
                layer.msg('操作成功')
                return
            })
        })
    });
</script>
</body>
</html>